<template>
    <div class="container">
        <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
      <div class="footer">footer</div>
    </div>
    <div class="tip">请将屏幕竖向显示</div> -->

        <!-- 视图页面的出口 -->

        <!-- <keep-alive>
            <router-view></router-view>
        </keep-alive> -->

            <router-view></router-view>
        <footer class="footer" v-if="!$route.meta.hidden">
            <ul>
                <router-link to="/home" tag="li">
                    <span class="iconfont icon-shouye"></span>
                    <p>首页</p>
                </router-link>
                <router-link to="/kind" tag="li">
                    <span class="iconfont icon-fenlei"></span>
                    <p>分类</p>
                </router-link>
                <router-link to="/cart" tag="li">
                    <span class="iconfont icon-gouwuche"></span>
                    <p>购物车</p>
                </router-link>
                <router-link v-if="loginState" to="/user" tag="li">
                    <span class="iconfont icon-My"></span>
                    <p>我的</p>
                </router-link>
                <router-link v-else to="/login" tag="li">
                    <span class="iconfont icon-My"></span>
                    <p>未登录</p>
                </router-link>
            </ul>
        </footer>
        <div class="tip">请将屏幕竖向显示</div>
    </div>
</template>
<script>
export default {
    // 使用计算属性获取状态管理器的状态（数据   
    computed: {
        loginState() {
            // 获取登录的状态
            // return this.$store.state.loginState
            // 带模块使用
            return this.$store.state.user.loginState
        }
    }
}
</script>

<style lang="stylus">
html, body, .container
    height 100%
html
    // font-size 100px
    font-size 26.666666vw
@media all and (min-width 960px)
 html
    font-size 100px
body
  font-size 12px
.container
  display flex
  flex-direction column
.box
    display flex
    flex-direction column
    flex 1
    overflow auto
    .header
        height 0.44rem
        background-color pink
    .footer
        height 0.5rem
        background-color pink
    .content
        flex 1
        overflow auto
        // background-color  #1492e4
.footer
    ul
        list-style none
        height 100%
        display flex
        margin 0
        padding 0
        li
            flex 1
            height 100%
            display flex
            flex-direction column
            justify-content center
            align-items center
            &.router-link-active
                color #f66
            span
                margin-top 0.10rem

.tip
    position fixed
    top 0
    left 0
    bottom 0
    right 0
    background-color rgba(0, 0, 0, 0.5)
    font-size 30px
    font-weight bold
    justify-content center
    align-items center
    display none
@media all and (orientation landscape)
 .tip
    display flex
</style>
